<template>
  <div class="topic">
    <div>
      <NavBar :show-left-arrow="false" left-text="" title="专题"></NavBar>
    </div>
    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
      <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad"
        :immediate-check="false">
        <ul>
          <li class="item padding-lr-20" v-for="item in list" :key="item.id">
            <img class="img" :src="item.scene_pic_url" alt="">
            <div class="title">{{ item.title }}</div>
            <div class="subtitle">{{ item.subtitle }}</div>
            <div class="price">{{ item.price_info }}元起</div>
          </li>
        </ul>
      </van-list>
    </van-pull-refresh>
  </div>
</template>
<script setup>
import { listaction as listactionApi } from '@/api/topic'
import NavBar from '@/components/NavBar.vue'
import { onMounted, ref } from 'vue';
const list = ref([]);
const loading = ref(false);
const finished = ref(false);
const page = ref(1)
const refreshing = ref(false);

onMounted(() => {
  getTopicList()
})
const getTopicList = async () => {
  const res = await listactionApi({ page: page.value })
  list.value.push(...res.data)
  page.value++
  refreshing.value = false
  // 加载状态结束
  loading.value = false;
  if (page.value > res.total) {
    finished.value = true;
  }

}
const onLoad = () => {
  getTopicList()
};
const onRefresh = () => {
  // 清空列表数据
  list.value = []
  page.value = 1
  finished.value = false;

  // 重新加载数据
  // 将 loading 设置为 true，表示处于加载状态
  loading.value = true;
  onLoad();
};
</script>
<style lang="scss" scoped>
.topic {
  // height: calc(100vh - 150px);
  padding-bottom: 150px;

  .item {
    background-color: #fff;

    .img {
      width: 710px;
      height: 343px;
    }

    .title {
      font-family: PingFangSC-Medium;
      font-size: 30px;
      color: #333333;
      letter-spacing: 0;
      font-weight: 500;
    }

    .subtitle {
      font-family: PingFangSC-Regular;
      font-size: 26px;
      color: #999999;
      letter-spacing: 0;
      font-weight: 400;
    }

    .price {
      font-family: PingFangSC-Semibold;
      font-size: 26px;
      color: #9E4242;
      letter-spacing: 0;
      font-weight: 600;
    }
  }
}
</style>